﻿<p>
    This example shows the drag&amp;drop capabilities of Telerik TreeView for ASP.NET
    MVC.</p>
<p>
    To allow reordering of the TreeView nodes, all you need to do is to call <strong>DragAndDrop(true)</strong>.</p>
<p>
    If you want to process any user action (i.e. so that you save it to a database),
    you have to attach handlers to the <strong>drag&amp;drop client-side events</strong>,
    namely:
</p>
<ul>
    <li><strong>OnNodeDragStart <span class="cancellable">(cancellable)</span></strong>
        - raised when an attempt to drag a node has been made. Used to deny dragging of
        nodes.</li>
    <li><strong>OnNodeDragging</strong> - raised while the user drags a node. Used for providing
        clues whether the drag will be successful, thus enhancing user experience.</li>
    <li><strong>OnNodeDrop <span class="cancellable">(cancellable)</span></strong> - raised
        when a node is dropped. Used for processing of the drop result.</li>
    <li><strong>OnNodeDropped</strong> - raised when a node has been dropped on the treeview.
        Used when saving the treeview state.</li>
    <li><strong>OnNodeDragCancelled</strong> - raised when the user cancels a drag by hitting
        the Esc key. Used for cleaning up any artifacts from the dragging.</li>
</ul>
<p>
    You can provide contextual drag clues with less code by providing a CSS selector
    to the <strong>DropTargets</strong> property, like this:</p>
<pre class="prettyprint">
&lt;%= Html.Telerik().TreeView()
        .Name("TreeView")
        .DragAndDrop(settings => settings
            <em>.DropTargets(".drop-container")</em>
        )
        .Items(items => { /*items definition*/ })
%&gt;
</pre>
